<template>
	<view>
		<view class="margin-bottom-sm"
			style="border-radius:6px;box-shadow: 0 3rpx 8rpx rgba(0, 0, 0, 0.2);margin-left:3.5%;margin-right:3.5%;margin-top:15rpx">
			<view class="flex justify-between align-center">
				<view class="flex justify-start align-center margin">
					<view class="text-lg text-bold">{{device.deviceName}}</view>
					<view class="padding-left text-gray">
						<text>{{device.deviceCore}}</text>
					</view>
				</view>
				<!-- 	<view class="padding flex text-black" style="font-size: 44rpx;">
					<view @tap="goToHistory()" class="cuIcon-calendar"></view>
				</view> -->
			</view>
			<image :src="imageUrl" class="padding-xs" style="width: 600rpx;height:400rpx"></image>
			<view class="flex justify-between flex-wrap margin-bottom margin-top">
				<view v-for="(item,index) in sensorInfoList" :key="index" v-if="index < 8"
					class="padding-bottom padding-lr margin-bottom" style="width: 25%">
					<view
						style="display:flex;flex-direction:column;justify-content: space-between; align-items: center;height: 150rpx;text-align: center;">
						<view>{{item.name}}</view>
						<view :style="{color : themeConfig.primaryColor}">{{item.value}}</view>
						<!-- 	<view>{{item.unit}}</view> -->
					</view>
				</view>
			</view>
		</view>

		<view class="flex justify-between padding-lr padding-tb-xs text-black text-bold">
			<view>控制</view>
		</view>
		<view class="flex justify-between flex-wrap bg-white" style="margin-left:2.5%;margin-right:2.5%">
			<view v-for="(item,index) in switchList" :key="index" class="padding-tb-sm padding-lr"
				style="padding-left:1%;padding-right:1%;width:25%;">
				<view class="padding-sm"
					style="border-radius:6px;box-shadow: 0 3rpx 8rpx rgba(0, 0, 0, 0.2);height: 200rpx;">
					<view
						style="display:flex;flex-direction:column;justify-content:space-between;align-items:center;height:150rpx;text-align:center;">
						<view class="text-xs">{{item.name}}</view>
						<view>
							<switch @change="saveSwitchSetting(item)" class="switch-text" :class="themeConfig.theme"
								:checked="item.value" />
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="flex justify-between padding-lr padding-tb-xs text-black text-bold">
			<view>温度</view>
		</view>
		<view class="margin-top-sm"
			style="border-radius:6px;box-shadow: 0 3rpx 8rpx rgba(0, 0, 0, 0.2);margin-left:3.5%;margin-right:3.5%;background-color:#f6f6f6;position: relative;">
			<view class="text-grey" style="position: absolute;top:15rpx;right: 150rpx;">
				<view style="font-size: 46rpx">{{ITemp.value}}°C</view>
			</view>
			<view class="flex justify-between align-center margin-bottom padding-bottom-sm padding-top-sm">
				<image class="margin-sm" style="width:80rpx;height:70rpx"
					src="https://core.ztn-tech.com/file/download/iot/sensor_icon/temperature.png"></image>
				<view>
					<view style="margin-left:85rpx;margin-bottom:10rpx;">
						<dialogBox :value="ITemp.value"></dialogBox>
					</view>
					<view style="border-radius:6px;width:496rpx;height:8rpx;background-color:#dedede;"
						class="flex justify-between align-center">
						<view v-for="(item,index) in 5" :key="index">
							<!-- #dedede -->
							<view :id="item" :class=" bg-red" style="margin-left:90rpx"
								:style="{backgroundColor: item != 4 ? index === selectIndex ? '#ffffff' : '#e54d42' : '#e54d42',
							border: index === selectIndex ? '4rpx solid #e54d42' : '',width:index === selectIndex ? '18rpx' : '8rpx',height:index === selectIndex ? '18rpx' : '8rpx',borderRadius: index === selectIndex ? '14rpx' : ''}">
							</view>
						</view>
					</view>
				</view>
				<view style="width:35rpx;height:45rpx"></view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		showToast,
		showLoading,
		hideLoading
	} from '@/util/toast.js'
	import *
	as deviceSettingApi from '@/api/iot/iotDeviceSettingApi.js'
	import *
	as deviceSensorApi from '@/api/iot/iotDeviceSensorApi.js'
	import dialogBox from './dialogBox.vue'
	import * as iotDeviceApi from '@/api/iot/iotDeviceApi.js'
	import * as storage from '@/util/storage.js'
	import BaseView from '@/views/BaseView/index.vue'
	export default {
		extends:BaseView,
		name: "PainRoom",
		data() {
			return {
				sensorInfoList: [],
				switchList: [],
				data: [],
				device: {},
				imageUrl: 'https:\/\/baking-house.ztn-tech.com\/assets\/img\/facility\/type\/bakingHouse.png',
				ITemp: {},
				tabbarHeight: storage.getTabbarHeight(),
			}
		},
		mounted() {
			this.sensorInfoList = [{
					name: '运行时间',
					value: '15:09',
					nameColor: ''
				},
				{
					name: '运行统计',
					value: '15:09'
				},
				{
					name: '当前温度',
					value: '86Pa'
				},
				{
					name: '当前压力',
					value: '69Pa'
				},
				{
					name: '工作状态',
					value: '开启'
				},
				{
					name: '风机状态',
					value: '开启'
				},
				{
					name: '照明指示',
					value: '关闭'
				},
				{
					name: '环保指示',
					value: '关闭'
				}
			]
			this.switchList = [{
					name: '1',
					value: true,
				},
				{
					name: '2',
					value: true,
				},
				{
					name: '3',
					value: false,
				},
				{
					name: '4',
					value: true,
				},
			]
			this.getDeviceDetails()
		},
		components: {
			dialogBox,
		},
		methods: {
			saveSwitchSetting(item) {
				console.log(item)
				this.sendSetting(item.value ? '0' : '1', item.keyName, item.port)
			},
			sendSetting(value, keyName, port) {
				showLoading(this.$t('loading'), true)
				deviceSettingApi.sendSetting({
					deviceCore: this.deviceCore,
					value: value,
					keyName: keyName,
					port: port
				}).then((res) => {
					if (res.data) {
						showToast(this.$t('success'), 'none', 1000, true)
					} else {
						this.showErrorModal = true,
							this.settingError = res.msg
					}
					hideLoading()
					this.getDeviceDetails()
				})
			},
			getDeviceDetails() {
				iotDeviceApi.getDeviceDetails({
					deviceCore:this.deviceCore
				}).then(res => {
					const {
						data
					} = res
					if (data) {
						this.device = data
						this.getListWith()
					}
				})
			},
			getListWith() {
				const withExplain = true
				const withParam = false
				const withSetting = true
				deviceSensorApi.getListWith({
					deviceCore: this.deviceCore,
					withExplain: withExplain,
					withParam: withParam,
					withSetting: withSetting,
				}).then((res) => {
					const {
						data
					} = res
					if (data) {

						const sensorInfoList = []
						const switchList = []

						data.forEach(sensor => {
							sensor.settingList.forEach(setting => {
								if (setting.type === 'switch') {
									setting.value = setting.value === '1' ? true : false
									switchList.push(setting)
								}

								// switch (setting.keyName) {
								// 	case 'HLMode1':
								// 	case 'LMode':
								// 	case 'WMode1':
								// 	case 'WMode2':
								// 	case 'CAMODE':
								// 	case 'WAMODE':
								// 	case 'MWAMODE':
								// 	case 'W2AMODE':
								// 	case 'CAMODE':
								// 	case 'MW2AMODE':
								// 		setting.value = setting.value === '1' ? true : false
								// 		switchList.push(setting)
								// 		break
								// 	default:
								// }
							})

							sensor.explainList.forEach(explain => {
								if (explain.port === '1' && !explain.hidden) {
									sensorInfoList.push(explain)
								}
								if (explain.keyName === 'ITemp') {
									this.ITemp = explain
								}
								// switch (explain.keyName) {
								// 	case 'PCPress':
								// 	case 'ITemp':
								// 	case 'FCPress':
								// 	case 'MainCur':
								// 	case 'TCPress':
								// 	case 'MainVol':
								// 		sensorInfoList.push(explain)
								// 		break
								// 	default:
								// }
							})
						})
						this.sensorInfoList = sensorInfoList
						this.switchList = switchList
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: $uni-bg-color;
	}
</style>
